<#assign baseURL = springMacroRequestContext.getContextPath() />
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拓深科技</title>
<#include "./css.ftl">
</head>
<body>
<div id="wrapper">

<#include "./left_nav.ftl">

    <div id="page-wrapper" class="gray-bg dashbard-1">
    <#include "./top_nav.ftl">
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-9">
                <h2>地图模式</h2>
                <ol class="breadcrumb">
                    <li>
                        消防动态监测系统
                    </li>
                    <li class="active">
                        地图模式
                    </li>
                </ol>
            </div>
        </div>
        <div class="wrapper wrapper-content">
            <div class="row">
                <div class="col-lg-3">
                    <div class="row">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div id="jsTreeJSON"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="panel panel-default">
                        <div  class="panel-body">
                            <div class="row">
                                <div id="showMap" class="col-md-12">
                                    <h5 id="titleH5">点击左侧节点时，此处会显示地图。</h5>
                                    <div id="iPicture" data-interaction="hover">
                                        <div id="mapPicture" class="ip_slide">
                                        <#--<div id="pos" class="ip_tooltip ip_img32" style="top: 10px; left: 10px;"  data-round="roundBgR">-->
                                            <#--</div>-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <#include "./bottom_nav.ftl">
    </div>

</div>


<#include "./js.ftl">

<script>

    $(function(){
        initJstree();
    })

    function initJstree() {
        $.ajax({
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/water/dt_geobuilding/getTree",
            async:false,
            success:function (data_in) {
                var jsonObj = data_in;
                var data = [];
                for(var i  in jsonObj.data){
                    var level1 = jsonObj.data;
                    if(i==0){
                        var level1Obj = {
                            text:level1[i].name,
                            id:level1[i].id,
                            icon:"glyphicon glyphicon-globe",
                            state: {"opened" : true }
                        };
                    }else {
                        var level1Obj = {
                            text:level1[i].name,
                            id:level1[i].id,
                            icon:"glyphicon glyphicon-globe",
                            state: {"opened" : false }
                        };
                    }
                    if(level1[i].children != null)
                    {
                        var level2 = level1[i].children;
                        var level2Arr = [];
                        for(var j in level2){
                            if(i==0 && j==0){
                                var level2Obj = {
                                    text: level2[j].name,
                                    id: level2[j].id,
                                    icon: "glyphicon glyphicon-home",
                                    state: {"opened" : true }
                                };
                            }else {
                                var level2Obj = {
                                    text: level2[j].name,
                                    id: level2[j].id,
                                    icon: "glyphicon glyphicon-home",
                                    state: {"opened" : false }
                                };
                            }
                            if(level2[j].children != null)
                            {
                                var level3 = level2[j].children;
                                var level3Arr = [];
                                for(var k in level3){
                                    var level3Obj = {
                                        text: level3[k].name,
                                        id: level3[k].id,
                                        icon: "glyphicon glyphicon-flag"
                                    };
                                    level3Arr.push(level3Obj);
                                }
                                level2Obj .children = level3Arr;
                            }
                            level2Arr.push(level2Obj);
                        }
                        level1Obj.children = level2Arr;
                    }
                    data.push(level1Obj);
                }

                $('#jsTreeJSON').data('jstree',false).empty();
                $('#jsTreeJSON').jstree({
                    'core' : {
                        'data' : data,
                        'async' : true
                    }
                });
            }
        });
    }

    $("#jsTreeJSON").on("select_node.jstree", function (e, data) {
        var imgUrl = "http://" + getURL() + "${baseURL}/water/file/dt_geobuilding/getMap?id=" + data.node.id;
        $("#titleH5").empty();
        $("#mapPicture").empty();
        $("#mapPicture").append(
                '<img id="mapImg" width="100%" src='+ imgUrl + ' style="margin:0;padding: 0"  />'
        );
        var level = data.node.parents.length;
        if(level == 3){
            $.ajax({
                type: "GET",
                contentType: "application/json",
                dataType: "json",
                url: "${baseURL}/water/dt_map_pos/getAll?geo_building_id=" + data.node.id,
                async: false,
                success:function(data){
                    if(data.code === 0){
                        $("#mapImg").load(function () {
                            var w = $("#mapImg").width();
                            var h = $("#mapImg").height();
                            for(var index in data.data) {
                                var name = data.data[index].name;
                                var x_pos = data.data[index].pos_x;
                                var y_pos = data.data[index].pos_y;
                                var id = data.data[index].id;
                                $("#mapPicture").append(
                                        '<div class="ip_tooltip ip_img32" style="top:' + (h * y_pos) + "px" + ' ; left:' + (w * x_pos) + "px" + ' ;" data-tooltipbg="bgblack" data-animationtype="btt-slide"  data-round="roundBgW"><p style="text-align: center">'+name+'</p>' +
                                        <#if (role_type_id < 3 )>
                                        '<button type="button" class="btn btn-danger btn-block" onclick="deletePos('+id+')" >删除</button>' +
                                        </#if>
                                        '</div>'
                                );
                            }
                            $("#iPicture").iPicture();
                        });

                    }else{
                        swal({
                            title: "没有地图坐标点。",
                            type: "warning"
                        })
                    }
                },
                error:function(xhr, status, error){
                    console.log(xhr);
                    swal({
                        title: "请求异常。",
                        type: "error"
                    })
                }
            });
        }
        if(level == 1 || level == 2){
            $.ajax({
                type: "GET",
                contentType: "application/json",
                dataType: "json",
                url: "${baseURL}/water/dt_map_pos_geo/getAll?geo_id=" + data.node.id,
                async: false,
                success:function(data){
                    if(data.code === 0){
                        $("#mapImg").load(function () {
                            var w = $("#mapImg").width();
                            var h = $("#mapImg").height();
                            for(var index in data.data) {
                                var name = data.data[index].name;
                                var x_pos = data.data[index].pos_x;
                                var y_pos = data.data[index].pos_y;
                                var id = data.data[index].id;
                                $("#mapPicture").append(
                                        '<div class="ip_tooltip ip_img32" style="top:' + (h * y_pos) + "px" + ' ; left:' + (w * x_pos) + "px" + ' ;" data-tooltipbg="bgblack" data-animationtype="btt-slide"  data-round="roundBgW"><p style="text-align: center">'+name+'</p>' +
                                        <#if (role_type_id < 3 )>
                                        '<button type="button" class="btn btn-danger btn-block" onclick="deleteGeoPos('+id+')" >删除</button>' +
                                        </#if>
                                        '</div>'
                                );
                            }
                            $("#iPicture").iPicture();
                        });

                    }else{
                        swal({
                            title: "没有地图坐标点。",
                            type: "warning"
                        })
                    }
                },
                error:function(xhr, status, error){
                    console.log(xhr);
                    swal({
                        title: "请求异常。",
                        type: "error"
                    })
                }
            });
        }
    });

    function deleteGeoPos(id){
        $.ajax({
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/water/dt_map_pos_geo/delete?id=" + id,
            success:function(data){
                if(data.code === 0){
                    swal({
                        title: "删除成功。",
                        type: "success"
                    },function(isConfirm){
                        if(isConfirm) location.reload();
                    });
                }
                else{
                    swal({
                        title: "删除失败",
                        type: "error"
                    })
                }
            },
            error:function(xhr, status, error){
                console.log(xhr.responseText)
                swal({
                    title: "请求失败。",
                    type: "error"
                })
            }
        });
    }

    function deletePos(id){
        $.ajax({
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/water/dt_map_pos/delete?id=" + id,
            success:function(data){
                if(data.code === 0){
                    swal({
                        title: "删除成功。",
                        type: "success"
                    },function(isConfirm){
                        if(isConfirm) location.reload();
                    });
                }
                else{
                    swal({
                        title: "删除失败",
                        type: "error"
                    })
                }
            },
            error:function(xhr, status, error){
                console.log(xhr.responseText)
                swal({
                    title: "请求失败。",
                    type: "error"
                })
            }
        });
    }

</script>
</body>
</html>